import React from 'react';
import { message, Carousel } from 'antd';
import { connect } from 'react-redux';
import { API_HOST } from 'Constants/config';
import Api from 'Utils/api';
import CommonBg from 'Page/DispatchPage/Components/CommonBorder';

class SpecialManageDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      data: {},
    };
    this.initList = ::this.initList;
    this.renderPic = ::this.renderPic;
  }
  componentDidMount() {
    const { id } = this.state;
    if (id) {
      this.initList();
    }
  }
  initList() {
    const api = new Api({
      method: 'GET',
      path: `/archives/${this.state.id}`,
      success: (json) => {
        this.setState({ data: json });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  renderPic() {
    const picArray = this.state.data.picture;
    const pic = [];
    for (let i = 0, len = picArray.length; i < len; i++) {
      pic.push(<div key={picArray[i]}><img src={`${API_HOST}/files/${picArray[i]}`} alt="图片" /></div>);
    }
    return pic;
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <CommonBg
          title="专题档案详情"
          content={
            <div className="special-manage-detail">
              <div className="detail-header">{data.title ? data.title : '仙居农家乐一店中秋庆典'}</div>
              <div className="detail-content">
                {data.introduction ? data.introduction : '专题介绍'}
              </div>
              <div className="detail-pic" >
                <div>
                  <Carousel autoplay>{
                    data.picture && this.renderPic()
                  }
                  </Carousel>
                </div>
              </div>
              <div className="detail-video" >
                <div className="video-wrap">
                  {data.video &&
                  <video controls preload className="video" style={{ width: 800 }} >
                    <source src={`${API_HOST}/files/${data.video}`} type="video/webm" />
                  </video>
                  }
                </div>
              </div>
            </div>
          }
        />
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.mapReducer
  };
}

export default connect(mapStateToProps)(SpecialManageDetail);
